<template>
  <div class="border-one-background">
    <!-- 老旧改造小区 -->
    <div class="grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>老旧改造小区</span>
        <year20andyear19 class="yearOrMonth" :year="isyear20" />
      </div>
      <!-- 表格 -->
      <div id="yaerOnYearTable">
        <ul class="from_ljgzxq_wrap">
          <li class="from_ljgzxq_li" v-for="(item,index) in ylsz_ljgzxq.tableData" :key="item.plan">
            <div class="from_ljgzxq_span1">{{index+1}}</div>
            <div class="from_ljgzxq_span2">{{item.plan}}</div>
            <countTo class="from_ljgzxq_span3" :startVal="0" :endVal="item.planNumber" separator></countTo>
            <div class="from_ljgzxq_span4">同比</div>
            <div
              class="from_ljgzxq_span5"
              :style="'color:'+(item.liftingNumber>0 ?'rgba(255,73,101,1)':'rgba(68,199,135,1)')"
            >{{item.liftingNumber>0? "↑":"↓"}}</div>
            <div
              class="from_ljgzxq_span6"
              :style="'color:'+(item.liftingNumber>0 ?'rgba(255,73,101,1)':'rgba(68,199,135,1)')"
            >{{item.liftingNumber}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import year20andyear19 from "../../components/homePage/year20andyear19";

export default {
  name: "bottomRight",
  components: {
    year20andyear19
  },
  data() {
    return {
      //是否显示2020年
      isyear20: true,
      url: "http://10.10.208.6:2020/home/serv",
      ylsz_ljgzxq: {
        tableData: [
          {
            plan: "计划改造小区数（户）",
            planNumber: 9999,
            lifting: true,
            liftingNumber: 9999
          },
          {
            plan: "实际完成改造小区数（户）",
            planNumber: 9999,
            lifting: true,
            liftingNumber: 9999
          },
          {
            plan: "总建筑面积（万平方米）",
            planNumber: 9999,
            lifting: false,
            liftingNumber: 9999
          },
          {
            plan: "预计投资总金额（万元）",
            planNumber: 9999,
            lifting: false,
            liftingNumber: 9999
          }
        ]
      }
    };
  },
  mounted() {
    this.get_ylsz_ljqzxq();
  },
  methods: {
    get_ylsz_ljqzxq() {
      let _this = this;
      let params = { path: "ov", groupid: 9, year: 2020, ismoth: 1 };
      _this.http.post(_this.url, params).then(res => {
        let v = res.data;
        let s = _this.ylsz_ljgzxq;
        s.tableData[0].planNumber = v.jzy_ljxqgz_jhgzxqs;
        s.tableData[1].planNumber = v.jzy_ljxqgz_sjwcgzxqs;
        s.tableData[2].planNumber = v.jzy_ljxqgz_zjzmj;
        s.tableData[3].planNumber = v.jzy_ljxqgz_yjtzzje;
        s.tableData[0].liftingNumber = v.jzy_ljxqgz_jhgzxqs_bfb;
        s.tableData[1].liftingNumber = v.jzy_ljxqgz_sjwcgzxqs_bfb;
        s.tableData[2].liftingNumber = v.jzy_ljxqgz_zjzmj_bfb;
        s.tableData[3].liftingNumber = v.jzy_ljxqgz_yjtzzje_bfb;
        // jzy_ljxqgz_jhgzxqs	计划改造小区数(户)
        // jzy_ljxqgz_sjwcgzxqs	实际完成改造小区数(户)
        // jzy_ljxqgz_zjzmj	总建筑面积(万平方米)
        // jzy_ljxqgz_yjtzzje	预计投资总金额(万元)
        // jzy_ljxqgz_jhgzxqs_bfb	计划改造小区数同比(%)
        // jzy_ljxqgz_sjwcgzxqs_bfb	实际完成改造小区数同比(%)
        // jzy_ljxqgz_zjzmj_bfb	总建筑面积同比(%)
        // jzy_ljxqgz_yjtzzje_bfb	预计投资总金额同比(%)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.border-one-background {
  background: url("../../assets/building/bottom/border-one.png");
  background-size: 99% 98.5%;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
  //   width: 47.77rem;
  //   height: 24.77rem;
  #yaerOnYearTable {
    margin-top: 1.3rem;
    width: 100%;
    padding: 1rem;
    .from_ljgzxq_wrap {
      width: 98%;
      height: 18rem;
      background: rgba(0, 58, 155, 0.5);
      border: 1px solid rgba(4, 160, 254, 0.4);
      box-shadow: inset 0 1px 7px 0 #04a0fe;
      .from_ljgzxq_li {
        display: flex;
        height: 25%;
        width: 100%;
        border-bottom: 1px solid #0363b7;
        line-height: 4.31rem;
        font-family: DINAlternate-Bold;
        .from_ljgzxq_span1 {
          width: 5.38rem;
          text-align: center;
          font-size: 1.38rem;
          color: #fcb33a;
          letter-spacing: 0;
          text-align: center;
        }
        .from_ljgzxq_span2 {
          width: 14.77rem;
          font-size: 1.23rem;
          color: #bed7fa;
          letter-spacing: 0;
        }
        .from_ljgzxq_span3 {
          width: 6rem;
          font-size: 1.23rem;
          text-align: center;
          font-size: 1.84rem;
          color: #ffffff;
          letter-spacing: 0.1rem;
          margin-left: 3.54rem;
        }
        .from_ljgzxq_span4 {
          width: 2.46rem;
          text-align: center;
          color: #bed7fa;
          letter-spacing: 0;
          margin-left: 4.3rem;
          font-size: 1.23rem;
        }
        .from_ljgzxq_span5 {
          margin-left: 0.91rem;
        }
        .from_ljgzxq_span6 {
          width: 3rem;
          margin-left: 1rem;
        }
      }
    }
  }
}
</style>